import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { queryWechatUsers } from './service';
import type { WechatUserTableItem } from './types';

export default () => {
  const columns: ProColumns<WechatUserTableItem>[] = [
    {
      title: 'id',
      hideInTable: true,
      hideInForm: true,
      hideInSearch: true,
      dataIndex: '_id',
    },
    {
      title: '手机号码',
      dataIndex: 'phone',
      hideInForm: true,
      align: 'center',
    },
    {
      title: '昵称',
      dataIndex: 'nickname',
      hideInForm: true,
      align: 'center',
    },
    {
      title: '车牌号码',
      dataIndex: 'plateNumber',
      hideInForm: true,
      align: 'center',
    },
    {
      title: '车牌颜色',
      dataIndex: 'plateColor',
      align: 'center',
      hideInForm: true,
      hideInSearch: true,
      valueEnum: {
        0: { text: '未知颜色' },
        1: { text: '蓝色' },
        2: { text: '黄色' },
        3: { text: '白色' },
        4: { text: '黑色' },
        5: { text: '绿色' },
      },
    },
    {
      title: '余额',
      dataIndex: 'balance',
      align: 'center',
      hideInForm: true,
      hideInSearch: true,
      valueType: 'money',
      renderText: (text) => text / 100,
    },
    {
      title: '欠费',
      dataIndex: 'arrears',
      align: 'center',
      hideInForm: true,
      hideInSearch: true,
      valueType: 'money',
      renderText: (text) => text / 100,
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      align: 'center',
      hideInForm: true,
      hideInSearch: true,
      valueType: 'dateTime',
    },
  ];
  return (
    <PageHeaderWrapper
      header={{
        title: '',
        subTitle: '微信用户列表',
        breadcrumb: {
          routes: [
            {
              path: '/',
              breadcrumbName: '首页',
            },
            {
              path: '/wechat',
              breadcrumbName: '微信用户',
            },
            {
              path: '/wechat/users',
              breadcrumbName: '用户列表',
            },
          ],
        },
      }}
    >
      <ProTable<WechatUserTableItem>
        columns={columns}
        rowKey="_id"
        style={{ whiteSpace: 'nowrap' }}
        search={{
          labelWidth: 'auto',
        }}
        scroll={{ x: true }}
        columnEmptyText="暂无数据"
        dateFormatter="string"
        pagination={{
          showSizeChanger: true,
          showQuickJumper: true,
          defaultPageSize: 10,
          size: 'default',
        }}
        debounceTime={300}
        request={async (param, sort) => {
          const res = await queryWechatUsers(param, sort);
          return res;
        }}
      />
    </PageHeaderWrapper>
  );
};
